@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-link-blue: #3498db;
  --color-link-blue-light: #95c9ec;
  --color-link-blue-hover: #0468ab;
  --color-verified-contract: #2b50aa;
  --color-verified-contract-hover: #26007b;
  --color-kleros-gray: #6b7280;
  --color-kleros-gray-hover: #4b5563;
  /* Kleros label colors: neutral near-black to recall Kleros brand without overpowering */
  --color-kleros-tag: #374151; /* gray-700 */
  --color-kleros-tag-hover: #111827; /* gray-900 */
  --color-source-line-numbers: #738a9486;
  --color-source-line-highlight: #99ff00;
  --color-source-line-bg-highlight: #ffdddd;

  --font-sans: Roboto;
  --font-title: Space Grotesk;
  --font-address: Roboto Mono;
  --font-hash: Roboto Mono;
  --font-data: Roboto Mono;
  --font-balance: Fira Code;
  --font-blocknum: Roboto;
  --font-code: Fira Code;

  --border-color-skin-from: rgb(var(--color-from-border));

  --text-color-skin-button: rgb(var(--color-button-text));
  --text-color-skin-from: rgb(var(--color-from-text));

  --background-color-skin-button-fill: rgb(var(--color-button-fill));
  --background-color-skin-button-hover-fill: rgb(
    var(--color-button-hover-fill)
  );
  --background-color-skin-from: rgb(var(--color-from-fill));
  --background-color-skin-to: rgb(var(--color-to-fill));
  --background-color-skin-table-hover: rgb(var(--color-table-row-hover));

  --breakpoint-3xl: 120rem;
  --breakpoint-4xl: 160rem;
  --breakpoint-5xl: 200rem;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility dark-mode {
  @apply dark:invert dark:-hue-rotate-180 dark:brightness-90;
}

@utility dark-no-invert {
  @apply dark:invert dark:hue-rotate-180 dark:saturate-[1.25];
}

@layer base {
  :root {
    --color-button-fill: 244 244 245; /* gray-100 */
    --color-button-hover-fill: 228 228 231; /* gray-200 */
    --color-button-text: 113 113 122; /* gray-500 */

    --color-from-border: 254 226 226;
    --color-from-text: 220 38 38;
    --color-from-fill: 254 242 242;
    --color-to-fill: 236 253 245;

    --color-table-row-hover: 243 244 246;
  }
  .test-theme {
    --color-button-fill: 14 165 233; /* sky-500 */
    --color-button-hover-fill: 56 189 248; /* sky-400 */
    --color-button-text: 186 230 253; /* sky-200 */

    --color-from-border: 251 146 60;
    --color-from-text: 249 115 22;
    --color-from-fill: 254 215 170;
    --color-to-fill: 125 211 252;

    --color-table-row-hover: 2 132 199;
  }
  .dark {
    --color-source-line-highlight: #33ff00;
  }
}

@layer components {
  img {
    @apply dark-no-invert;
  }

  video {
    @apply dark-no-invert;
  }
}

@utility input-number-no-arrows {
  @apply [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none;
}
